import { useState, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import {
  Card,
  Row,
  Col,
  Tooltip,
  Button,
  Space,
  Tag,
  Popconfirm,
  message,
} from 'antd';
import { findList, removeById } from '../../../api';
import {
  UsergroupAddOutlined,
  EyeOutlined,
  EditOutlined,
  MinusOutlined,
  QuestionCircleOutlined,
} from '@ant-design/icons';
import './index.css';

const Patient = () => {
  const navigate = useNavigate();
  const [patientList, setPatientList] = useState([]);

  useEffect(async () => {
    const patientListData = await findList();
    setPatientList(patientListData);
  }, []);

  const deleteConfirm = async (id) => {
    const result = await removeById(id);
    if (result) {
      setPatientList(patientList.filter((item) => item.id !== id));
      message.success('成功删除就诊人');
    }
  };

  const deleteCancel = (e) => {};

  const gotoPatientUpdate = (id) => {
    if (id) {
      navigate('/user/patientUpdate/' + id);
    } else {
      navigate('/user/patientUpdate');
    }
  };

  return (
    <div className='m-l-30 m-r-30 m-b-30'>
      <Row>
        <Col flex='auto'>
          <h2>就诊人管理</h2>
        </Col>
        <Col flex='100px'>
          <Button
            shape='round'
            icon={<UsergroupAddOutlined />}
            style={{ backgroundColor: '#4fae34', color: 'white' }}
            onClick={() => gotoPatientUpdate()}
          >
            <span style={{ color: 'white' }}>添加就诊人</span>
          </Button>
        </Col>
      </Row>

      <Row gutter={16} wrap>
        {patientList.map((_) => {
          return (
            <Col key={_.id} span={8}>
              <Card
                title={
                  <>
                    <Tag>{_.isInsure === 1 ? '医保' : '自费'}</Tag>
                    {_.name}
                  </>
                }
                extra={
                  <Space>
                    <Button
                      size='small'
                      type='primary'
                      shape='circle'
                      icon={<EditOutlined />}
                      onClick={() => gotoPatientUpdate(_.id)}
                    />
                    <Popconfirm
                      title='确认删除改就诊人？'
                      onConfirm={() => deleteConfirm(_.id)}
                      onCancel={deleteCancel}
                      okText={<span style={{ color: 'white' }}>确认</span>}
                      cancelText='取消'
                      icon={<QuestionCircleOutlined style={{ color: 'red' }} />}
                    >
                      <Button
                        size='small'
                        type='primary'
                        shape='circle'
                        danger
                        icon={<MinusOutlined />}
                      />
                    </Popconfirm>
                  </Space>
                }
              >
                <Space direction='vertical'>
                  <div>证件类型：{_.param.certificatesTypeString} </div>
                  <div>证件号码：{_.certificatesNo}</div>
                  <div>用户性别：{_.sex === 1 ? '男' : '女'}</div>
                  <div>出生日期：{_.birthdate}</div>
                  <div>手机号码：{_.phone}</div>
                  <div>婚姻状况：{_.isMarry === 1 ? '男' : '女'}</div>
                  <div>
                    当前住址：{_.param.provinceString}/{_.param.cityString}/
                    {_.param.districtString}
                  </div>
                  <div>详细地址：{_.param.fullAddress}</div>
                </Space>
              </Card>
            </Col>
          );
        })}
      </Row>
    </div>
  );
};

export default Patient;
